<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP+Mysql模拟“顶”和“踩”的功能</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="digg">  
    <div id="dig_up" class="digup"> 
        <span id="num_up"></span> 
        <p>赞一个！</p> 
        <div id="bar_up" class="bar"><span></span><i></i></div> 
    </div> 
       <div id="dig_down" class="digdown"> 
        <span id="num_down"></span> 
        <p>踩一个！</p> 
        <div id="bar_down" class="bar"><span></span><i></i></div> 
    </div> 
    <div id="msg"></div> 
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
	//当鼠标滑入和滑出投票按钮时的效果
	$("#dig_up").hover(function(){
		$(this).addClass("digup_on");	
	},function(){
		$(this).removeClass("digup_on");
	});
	
	$("#dig_down").hover(function(){
		$(this).addClass("digdown_on");	
	},function(){
		$(this).removeClass("digdown_on");
		})
		
	//初始化数据
	getdata("do.php",1);
	
	//点击赞一下
	$("#dig_up").click(function(){
		getdata("do.php?action=like",1);	
	})
	
	//点击踩一下
	$("#dig_down").click(function(){
		getdata("do.php?action=unlike",1);	
	})	
})

function getdata(url,sid){
	$.getJSON(url,{id:sid},function(data){
		if(data.success==1){//投票成功
			$("#num_up").html(data.like);
			//通过控制宽度来显示百分比进度条效果
			$("#bar_up span").css("width",data.like_percent);
			$("#bar_up i").html(data.like_percent);
			$("#num_down").html(data.unlike);
			$("#bar_down span").css("width",data.unlike_percent);
			$("#bar_down i").html(data.unlike_percent);
		}else{//投票失败
			$("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}).animate({top:'-50px',opacity:0}, "slow"); 
		}
	})
}
</script>
</body>
</html>
